<?php 
  $num1=isset($_POST['num1'])?$_POST['num1']:0;
  $num2=isset($_POST['num2'])?$_POST['num2']:0;
  $fu=isset($_POST['fu'])?$_POST['fu']:0;
  switch ($fu){
  	case'-':
		$result=$num1-$num2;
		break;
    case'+':
		$result=$num1+$num2;
		break;
    case'*':
		$result=$num1*$num2;
		break;
	case'/':
		$result=$num1/$num2;
		break;
	default:
		break;
  }

 ?>
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>Document</title>
<style type="text/css">
     *{
     	padding: 0px;
     	margin: 0px;
     }
     a{
     	text-decoration: none;
     }
	.box{
		width: 225px;
		height: 320px;
		margin: 50px auto;
		border: solid 1px #ccc;
		background: #7da8ce;
		border-radius: 10px;
	}
	.box .a1-box{
			width: 100px;
			height: 28px;
			text-indent: 5px;
			float: left;
		}
	.box .a1-box p{
		line-height: 28px;
		font-size: 12px;
		color: #000;
	}
	.box .a1-box img{
		float: left;
		margin-top: 5px;
		margin-left: 5px;
	}
	.box .a2-box{
		width: 125px;
		height: 28px;
		float: left;
	}
	.box .a2-box .b1-box{
		width: 48px;
		height: 19px;
		background: #d2918c;
		float: right;
		border-top: none;
		color: #fff;
		font-weight: 1000;
		font-size: 14px;
	}
	.box .a2-box .b2-box{
		width: 28px;
		height: 19px;
		background: #adc2d5;
		float: right;
		border-top: none;
		color: #fff;
		font-weight: 1000;
		font-size: 14px;
	}
	.box .a2-box .b3-box{
		width: 28px;
		height: 19px;
		background: #adc2d5;
		float: right;
		border-top: none;
		color: #fff;
		font-weight: 1000;
		font-size: 14px;
	}
	.box .a3-box{
		width: 212px;
		height: 285px;
		border: solid 1px #000;
		float: left;
		margin-left: 6px;
		background: #e8f0f9;
	}
	.box .a3-box .b1-box{
		width: 212px;
		height: 18px;
		float: left;
	    background: #d4dbed;
	}
	.box .a3-box .b1-box p{
		font-size: 12px;
		color:#666;
		float: left;
		padding-left: 10px;
		padding-right: 10px;
		line-height: 18px;
		text-align: center;
	}
	.box .a3-box .b2-box{
		width: 200px;
		height: 255px;
		float: left;
		margin-left: 12px;
		margin-top: 12px;
		position: relative;
	}
	.box .a3-box .b2-box .c1-box{
		width: 188px;
		height: 48px;
		border: solid 1px #CCCCCC;
		float: left;
		background: #fff;
	}
	.box .a3-box .b2-box form input{
		width: 30px;
		height: 23px;
		border: solid 1px #666;
		float: left;
		margin-right: 5px;
		margin-top: 5px;
		line-height: 23px;
		text-align: center;
	}
	.box .a3-box .b2-box form .d1-box{
		position: absolute;
		bottom: 23px;
		left: 0px;
	}
	.box .a3-box .b2-box form .d2-box{
		position: absolute;
		bottom: 23px;
		left: 74px;
	}
	.box .a3-box .b2-box form .d3-box{
		position: absolute;
		bottom: 23px;
		left:111px;
	}
	.box .a3-box .b2-box form a{
		float: left;
		width: 30px;
		height: 23px;
		border: solid 1px #666;
		float: left;
		margin-right: 5px;
		margin-top: 5px;
		line-height: 23px;
		text-align: center;
		font-size: 12px;
	}
</style>	
	
	
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>	
<script type="text/javascript">


$(function(){
	var kong=[];
	var xian=[];
	var num;
	
	$('.box .a3-box .b2-box form .a1').click(function(){
		kong.push($(this).html());
		xian.push($(this).html());
		num=parseFloat(kong.join(''));
		$('.c1-box').html(xian.join(''));
	})
		$('.box .a3-box .b2-box form .a2').click(function(){
		kong=[];
		xian.push($(this).html());
		$('#num1').val(num);
		$('#fu').val('-');
		$('.c1-box').html(xian.join(''));
	})
	$('.box .a3-box .b2-box form .d3-box').click(function(){
		kong=[];
		xian.push($(this).html());
		$('#num1').val(num);
		$('#fu').val('+');
		$('.c1-box').html(xian.join(''));
	})
		$('.box .a3-box .b2-box form .a4').click(function(){
		kong=[];
		xian.push($(this).html());
		$('#num1').val(num);
		$('#fu').val('*');
		$('.c1-box').html(xian.join(''));
	})
	$('.box .a3-box .b2-box form .a5').click(function(){
		kong=[];
		xian.push($(this).html());
		$('#num1').val(num);
		$('#fu').val('/');
		$('.c1-box').html(xian.join(''));
	})
	
	$('.box .a3-box .b2-box form #denghao').click(function(){
        $('#num2').val(num);
	})
	
})
	
	
</script>	
	
</head>
<body>

	<div class="box">
		<div class="a1-box">
			<img src="jisuanqi.png"/>
			<p>计算器</p>
		</div>
		<div class="a2-box">
			<form action="" method="post">
				<input type="submit" name="" id="" value="X" class="b1-box"/>
				<input type="submit" value="口" class="b2-box"/>
				<input type="submit" name="" id="" value="-" class="b3-box"/>
			</form>
		</div>
        <div class="a3-box">
        	<div class="b1-box">
        		<p>查看</p>
        		<p>编辑</p>
        		<p>帮助</p>
        	</div>
        	<div class="b2-box">
        	    <div class="c1-box">
        	    	<?php echo $result;  ?>
        	    </div>
        	    <form action="" method="post">
        	    	<input type="text" name="" id="" value="MC" />
        	    	<input type="text" name="" id="" value="MR" />
        	    	<input type="text" name="" id="" value="MS" />
        	    	<input type="text" name="" id="" value="M+" />
        	    	<input type="text" name="" id="" value="M-" />
        	    	<input type="text" name="" id="" value="←" />
        	    	<input type="text" name="" id="" value="CE" />
        	    	<input type="text" name="" id="" value="C" />
        	    	<input type="text" name="" id="" value="±" />
        	    	<input type="text" name="" id="" value="√" />
                    <a href="javascript:void(0);" class="a1">7</a>
                    <a href="javascript:void(0);" class="a1">8</a>
                    <a href="javascript:void(0);" class="a1">9</a>
        	    	<a href="javascript:void(0);" class="a5">/</a>
        	    	<a href="javascript:void(0);" class="a2">%</a>
                    <a href="javascript:void(0);" class="a1">4</a>
                    <a href="javascript:void(0);" class="a1">5</a>
                    <a href="javascript:void(0);" class="a1">6</a>
        	    	<a href="javascript:void(0);" class="a4">*</a>
        	    	<input type="text" name="" id="" value="∏" />
                     <a href="javascript:void(0);" class="a1">1</a>
                     <a href="javascript:void(0);" class="a1">2</a>
                     <a href="javascript:void(0);" class="a1">3</a>
        	    	<a href="javascript:void(0);" class="a2">-</a>
        	    	<input type="submit" name="" id="denghao" value="=" style="height: 57px;width: 32px;"/>
        	    	<a href="javascript:void(0);" class="d1-box" style="width: 67px;">0</a>
        	    	<a href="javascript:void(0);" class="d2-box">.</a>
        	    	<a href="javascript:void(0);" class="d3-box">+</a>
        	    	<input type="text" name="num1" id="num1" value="" style="display:none"/>
        	    	<input type="text" name="fu" id="fu" value="" style="display:none"/>
        	    	<input type="text" name="num2" id="num2" value="" style="display:none"/>
        	    </form>
            </div>
        </div>
        
	</div>
	
	
</body>

</html>